<template>
    <el-dialog :title="$t('main.configDialogTitle')" :visible.sync="configDialogVisible" width="400px" :before-close="closeDialog">
        <el-form ref="configForm" :model="config" label-width="80px" label-position="right">
            <el-form-item :label="$t('config.language')+':'">
                <el-select v-model="config.language"  :placeholder="$t('config.chooseLanguage')">
                    <el-option v-for="(item,index) in Languages" :key="index" :label="item.lable" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('config.version')+':'">
               <el-tag type="success">{{config.version}}</el-tag>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="configFun">{{$t('FormPlaceholder.OK')}}</el-button>
                <el-button @click="closeDialog">{{$t('FormPlaceholder.cancel')}}</el-button>
            </el-form-item>
        </el-form>
</el-dialog>
</template>

<script>
import storage from '../redis/storage'
export default {
    props:["configDialogVisible"],
    data(){
        return {
            Languages:[
                {"lable":"简体中文","value":"zh"},
                {"lable":"English","value":"en"},
            ],
            config:{
                autoUpdate:true,
                language:this.$i18n.locale,
                version:'1.1.1'
            }
        }
    },
    methods:{
        closeDialog(){
            this.$emit("close-dialogStatus")
        },
        configFun(){
            this.$i18n.locale=this.config.language
            storage.setLang(this.$i18n.locale)
            let myNotification = new Notification(this.$t('main.configDialogTitle'),{
                icon:`${__static}/icons/icon.ico`,
                body: this.$t('config.updateSuccess')
            })
            this.closeDialog()
        }
    }
}
</script>

<style>

</style>